<template>
  <div>
    <el-card class="box-card">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="Mock">
          <el-select
            filterable
            clearable
            v-model="queryForm.mockUuid"
            placeholder="请选择Mock">
            <el-option
              v-for="item in mockCallOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Mock名称">
          <el-input v-model="queryForm.mockName" placeholder="模糊查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="download">导出</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        :data="pageResult.data"
        border
        :default-sort="{prop: 'updateTime', order: 'descending'}"
        style="width: 100%; margin-top: 20px;font-size: 10px">
        <el-table-column
          align="center"
          prop="mockName"
          label="Mock名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="mockUuid"
          label="mockUuid">
        </el-table-column>
        <el-table-column
          sortable
          align="center"
          width="150"
          label="创建时间">
          <template slot-scope="scope">
            {{ vueDateFormat(scope.row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          width="150"
          prop="runtime"
          label="执行耗时(ms)">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button style="margin-left: 0px" type="text" size="mini" @click="toView(scope.row)">查看</el-button>
            <el-button style="margin-left: 0px;color: red" type="text" size="mini" @click="toDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-footer>
        <vue-page :paginator="pageResult.paginator" :query="query"></vue-page>
      </el-footer>
    </el-card>
    <mock-call-report-view ref="mockCallReportView"></mock-call-report-view>
  </div>
</template>

<script>

import vuePage from "../common/vue-page.vue"
import {loadAppMockCallSelector} from "../../api/loadSelectorApi";
import {appMockCallReportDelete, appMockCallReportQuery} from "../../api/appMockCallReportApi";
import mockCallReportView from "./dialog/mockCallReportView";

export default {
  name: "mockCallReport",
  components: {
    mockCallReportView,
    vuePage,
  },
  data() {
    return {
      queryForm: {
        mockUuid: '',
        mockName: '',
      },
      mockCallOptions: [],
      // 查询返回结果
      pageResult: {
        data: [],
        paginator: {
          currentPage: 0,
          totalCount: 0,
          pageSize: 10,
          totalPage: 0
        }
      },
      logTargetId: undefined,
    }
  },
  created() {
    this.query()
  },
  methods: {
    async query() {
      let vm = this
      vm.mockCallOptions = await loadAppMockCallSelector()
      let ret = await appMockCallReportQuery(vm.queryForm, vm.pageResult.paginator)
      if (ret.ok) {
        vm.pageResult = ret.data.queryPage
      } else {
        vm.$message({type: 'error', message: '查询失败：' + ret.message});
      }
    },
    toView(row) {
      this.$refs.mockCallReportView.load(row)
    },
    async toDelete(row) {
      let vm = this
      vm.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await appMockCallReportDelete(row.id)
        await vm.query()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    download() {
      // appMockCallReportDownload(this.queryForm)
      window.location.href = process.env.BASE_API + "/amc/appMockCallReport/download?mockName=" + this.queryForm.mockName + "&mockUuid=" + this.queryForm.mockUuid;
    }
  }
}
</script>

<style scoped>

</style>
